<template>
    <div>
        <!--        搜索-->
        <page-main>
            <search-bar>
                <form-create :rule="rule" v-model="fApi" :option="options"/>
            </search-bar>
        </page-main>

        <page-main>
            <el-row :gutter="10" class="mb8">
                <el-col :span="1.5">
                    <el-button type="primary" icon="el-icon-plus" size="mini" @click="handleAdd">新增</el-button>
                </el-col>
                <el-col :span="1.5">
                    <el-button type="success" icon="el-icon-edit" size="mini" :disabled="single" @click="handleUpdate">修改
                    </el-button>
                </el-col>
                <el-col :span="1.5">
                    <el-button type="danger" icon="el-icon-delete" size="mini" :disabled="multiple" @click="handleDelete">
                        删除
                    </el-button>
                </el-col>
                <el-col :span="1.5">
                    <el-button type="info" icon="el-icon-upload2" size="mini">导入</el-button>
                </el-col>
                <el-col :span="1.5">
                    <el-button type="warning" icon="el-icon-download" size="mini">导出</el-button>
                </el-col>
            </el-row>
        </page-main>
        <!--        表格-->
        <page-main>
            <el-table
                :data="tableData.data"
                style="width: 100%;" :stripe="tableData.table_config.stripe" :height="tableData.table_config.height">
                <el-table-column
                    type="selection"
                    width="55" v-if="tableData.table_config['selection']">
                </el-table-column>
                <div v-for="(table_fields, index) in tableData.table_fields" v-key="table_fields.id">
                    <el-table-column
                        v-bind:prop="table_fields.prop"
                        v-bind:width="table_fields.width"
                        v-bind:label="table_fields.label">
                    </el-table-column>
                </div>
                <el-table-column
                    label="操作"
                    width="100">
                    <template slot-scope="scope">
                        <el-button @click="handleClick(scope.row)" type="text" size="small">查看</el-button>
                        <el-button type="text" size="small">编辑</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <el-pagination style="margin-top: 15px;"
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="tableData.current_page"
                :page-sizes="[10, 20, 50, 100]"
                :page-size="tableData.per_page"
                layout="total, sizes, prev, pager, next, jumper"
                :total="tableData.total">
            </el-pagination>
        </page-main>
    </div>
</template>

<script>
import SearchBar from "@/components/SearchBar";
export default {
    name: "table",
    components: {SearchBar},
    data() {
        return {
            tableData: {
                table_config: {
                    "stripe": true,
                    "height": 550,
                    "selection": true
                }
            },
            fApi: {},
            options: {
                onSubmit: (formData) => {
                    alert(JSON.stringify(formData))
                },
                submitBtn: {
                    innerText:'搜索',
                    icon:'el-icon-search',
                    size:'small'
                }
            },
            rule: [
                {
                    type: 'ElRow',
                    children: [
                        {
                            type: 'ElCol',
                            props: {
                                span: 12
                            },
                            children: [
                                formCreate.maker.input('商品名称', 'goods_name', 'iphone'),
                                formCreate.maker.number('商品价格', 'goods_price', 8688)
                            ]
                        },
                        {
                            type: 'ElCol',
                            props: {
                                span: 12
                            },
                            children: [
                                formCreate.maker.radio('是否显示', 'is_show', 1).options([
                                    {value: 1, label: '显示'},
                                    {value: 0, label: '不显示'}
                                ])
                            ]
                        }
                    ]
                }
            ]
        }
    },
    created() {
        let current_page = this.$route.params.current_page
        let per_page = this.$route.params.per_page
        this.tableData.current_page = current_page != ':current_page' ? current_page : 1;
        this.tableData.per_page = per_page != undefined ? per_page : 10;
        this.$api.get('/table_demo/' + this.tableData.per_page + '/?page=' + this.tableData.current_page)
            .then((response) => {
                if (response.code == 0) {
                    this.tableData = response.data
                }
            })
            .catch((err) => {
                console.log(err)
            })
    },
    methods: {
        handleSizeChange(val) {
            this.$router.push('/curd/table/' + this.tableData.current_page + '/' + val)
        },
        handleCurrentChange(val) {
            this.$router.push('/curd/table/' + val + '/' + this.tableData.per_page)
        }
    }
}
</script>
